<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
           
   

            
        }
        #banner{
            width: 800px;
            height: 400px;
            border: 2px solid #999;
            overflow: hidden;
            position: relative;
          
         

        }
        
        #imglist{
            width: 4000px;
            height: 400px;
        }
        #imglist img{
            width: 800px;
            height: 400px;
        }
        #imglist li{
            float: left;
        }
        .prev{
            background: #666;
            width: 30px;height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            position: absolute;
            left: 5px;
            top: 45%;
            cursor: pointer;
        }
        .next{
            background: #666;
            width: 30px;height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            position: absolute;
            right: 5px;
            top: 45%;
            cursor: pointer;
        }
        #icolist{
            position: absolute;right: 10px;
            bottom: 10px;

        }
        #icolist li{
            width: 30px;height: 30px;
            border-radius: 50%;
            background: #666;
            text-align: center;
            line-height: 30px;
            color: #fff;
            float: left;
            margin-left: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    
    <div id="banner">
       
        <ul id="imglist">
            <li><img src="微信图片_20240516145158.jpg" alt=""></li>
            <li><img src="微信图片_20240516144551.jpg" alt=""></li>
            <li><img src="微信图片_20240516144905.jpg" alt=""></li>
            <li><img src="微信图片_202405161449052.jpg" alt=""></li>
           
        </ul>
        <ul id="icolist">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="prev">《</div>
        <div class="next">》</div>
    </div>
    <script>
        var eprve=document.querySelector('.prev');
        var enext=document.querySelector('.next');
        var esico=document.getElementById('icolist').getAttributeNames('li');
        var eicolist=document.querySelector('#icolist');
        var eimglist=document.querySelector('#imglist');
        var left=0;
        var timer;
        run();
        function run(){
            if(left<=-3200){
                left=0;
            }
            var m =Math.floor(-left/800);

            imglist.style.marginLeft=left+'px';
            var n=(left%800==0)?n=1200:n=10;
            left-=10;
            timer=setTimeout(run,n);
            icochange(m);
        }
        function imgchange(n){
            let lt=-(n*800);
            imglist.style.marginLeft=lt+'px';
            left=lt;

        }
        eprve.onlick=function(){
           let prevgo=Math.floor(-left/800)-1;
           if(prevgo==-1){
               prevgo=3;
        }
        imgchange(prevgo);
    }
        enext.onlick=function(){
            let nextgo=Math.floor(-left/800)-1;
           if(nextgo==4){
            nextgo=0;
           }
           imgchange(nextgo);
        }
        function icochange(m){
            for(let index=0;index<esico.length;index++){
                esico[index].style.backgroundcolor='';
            }
            if(m <esico.length){
                esico[m].style.backgroundcolor='red';
            }
        }
        eicolist.onlick=function(){
            var tg=event.target;
            let ico=tg.innerHTML-1;
            imgchange(ico);
            icochange(ico)
        }
        eimglist.onmouseover=function(){
            clearTimeout(timer);
        }
        eimglist.onmouseeout=function(){
            run();
        }
    </script>
</body>
</html>